<template>
    <div class="container">
  
      <div class="header">
        <div class="header-info">
          <div class="info-item">
            <div class="left">
              <div class="left-title">{{ state.header.left.title }}</div>
              <div class="left-number">{{ state.header.left.number }}人</div>
            </div>
            <div class="right">
              <div class="right-picwarp">
                <img :src="LeftWarp" alt="">
                <div class="right-pic">
                  <img :src="LeftPic" alt="">
                </div>
              </div>
            </div>
          </div>
          <div class="info-item">
            <div class="left">
              <div class="left-title">{{ state.header.right.title }}</div>
              <div class="left-number">{{ state.header.right.number }}人</div>
            </div>
            <div class="right">
              <div class="right-picwarp">
                <img :src="RightWarp" alt="">
                <div class="right-pic">
                  <img :src="RightPic" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="header-title">{{ state.header.title }}</div>
      </div>
  
      <div class="main">
        <div class="left">
  
          <div class="warp">
            <div class="head">
              <div class="left-title">{{ state.main.title }}</div>
              <div class="left-time">{{ state.main.time }}</div>
            </div>
            <div class="left-content">
              <div class="seat-left">
                <div class="seat" v-for="(item, index) in 144" :key="index">
                  <div class="name">张三</div>
                  <div class="org">部门：{{ index + 1 }}</div>
                </div>
              </div>
              <div class="seat-right">
                <div class="seat" v-for="(item, index) in 144" :key="index">{{ index + 1 }}</div>
              </div>
            </div>
          </div>
  
          <div class="left-charts">
            <div class="chart1">
              <div class="chart" style="width: 100%;height: 100%" ref="chart1Ref"></div>
            </div>
            <div class="icon">
              <div class="icon-warp">
                <img :src="Icon1" alt="">
                <div class="title">在座</div>
              </div>
              <div class="icon-warp">
                <img :src="Icon2" alt="">
                <div class="title">离开</div>
              </div>
              <div class="icon-warp">
                <img :src="Icon3" alt="">
                <div class="title">空闲</div>
              </div>
            </div>
            <div class="chart2">
              <div class="chart" style="width: 100%;height: 100%" ref="chart2Ref"></div>
            </div>
          </div>
        </div>
        <div class="main-right">
          <div class="right-title">{{ state.main.right.title }}</div>
          <!-- <el-scrollbar style="height: calc(100% - 50px)"> -->
          <div class="right-content" ref="myTable">
            <div class="people" v-for="(item, index) in 45">
              <div class="avater">
                <img :src="Avater" alt="">
              </div>
              <div class="info">
                <div class="name">张三</div>
                <div class="time"> 2024-3-22 11:00</div>
              </div>
              <div class="status">
                <img :src="OutMeeting" alt="">
              </div>
            </div>
          </div>
          <!-- </el-scrollbar> -->
        </div>
      </div>
    </div>
  </template>
  <script lang="ts" setup>
  import { markRaw, nextTick, onMounted, reactive, ref } from "vue";
  import LeftWarp from '@/assets/header/left-warp.png'
  import LeftPic from '@/assets/header/left.png'
  import RightWarp from '@/assets/header/right-warp.png'
  import RightPic from '@/assets/header/right.png'
  import Avater from '@/assets/content/avater.png'
  // import InMeeting from '@/assets/content/inmeeting.png'
  import Icon1 from '@/assets/content/icon-1.png'
  import Icon2 from '@/assets/content/icon-2.png'
  import Icon3 from '@/assets/content/icon-3.png'
  
  import OutMeeting from '@/assets/content/outmeeting.png'
  import * as echarts from 'echarts';
  import moment from 'moment';
  
  const chart1Ref = ref()
  const chart2Ref = ref()
  // const chartsChild2Ref = ref()
  const state = reactive({
    header: {
      title: '会议动态',
      left: {
        title: '正常人数',
        number: 5,
      },
      right: {
        title: '异常人数',
        number: 8,
      }
    },
    main: {
      time: moment().format('YYYY年MM月DD日 HH:mm:ss'),
      title: '参会人数展示',
      charts: {
        title1: '在场人数',
        title2: '离场人数',
        title3: '在场',
        title4: '离开',
        title5: '空闲',
        myCharts: [] as any,
        data1: undefined as any,
        data2: undefined as any,
      },
      right: {
        title: '会议人员实时出入',
      }
    }
  })
  
  setInterval(() => {
    state.main.time = moment().format('YYYY年MM月DD日 HH:mm:ss')
  }, 1000)
  
  const initChart1 = () => {
    state.main.charts.data1 = markRaw(echarts.init(chart1Ref.value));
    var value = 120;
    const option = {
      backgroundColor: '000',
      title: {
        text: `${value}人`,
        subtext: '离场人数',
        left: 'center',
        top: 'center', //top待调整
        textStyle: {
          color: '#fff',
          fontSize: 54,
          fontFamily: 'DINAlternate-Bold',
        },
        subtextStyle: {
          color: '#ff',
          fontSize: 30,
          fontFamily: 'PingFangSC-Regular',
          top: 'center'
        },
        itemGap: 2 //主副标题间距
      },
      xAxis: {
        splitLine: {
          show: false
        },
        axisLabel: {
          show: false
        },
        axisLine: {
          show: false
        }
        // data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
      },
      yAxis: {
        splitLine: {
          show: false
        },
        axisLabel: {
          show: false
        },
        axisLine: {
          show: false
        }
      },
      series: [
        // 内圆
        // {
        //   type: 'pie',
        //   radius: ['0', '50%'],
        //   center: ['50%', '50%'],
        //   z: 0,
        //   itemStyle: {
        //     normal: {
        //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        //         offset: 0,
        //         color: '#1147A1'
        //       },
        //       {
        //         offset: 0.5,
        //         color: '#423DB3'
        //       },
        //       {
        //         offset: 1,
        //         color: '#1147A1'
        //       }
        //       ]),
        //       label: {
        //         show: false
        //       },
        //       labelLine: {
        //         show: false
        //       }
        //     },
        //   },
        //   label: {
        //     normal: {
        //       position: "center",
  
        //     }
        //   },
        //   data: [100],
        // },
        // 进度圈
        {
          type: 'pie',
          radius: ["50%", "52%"],
          data: [{
            value: value,
            itemStyle: {
              normal: {
                borderWidth: 26,
                borderRadius: 0,
                borderColor: {
                  colorStops: [{
                    offset: 0,
                    color: '#376CCB'  // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#27DEF7' // 100% 处的颜色
                  }]
                },
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
              },
            },
            label: {
              normal: {
                show: false
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
          },
          {
            name: 'gap',
  
            value: 288 - value,
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0,
              }
            },
          }
          ]
        },
        //刻度尺
        {
          // name: "白色圈刻度",
          type: "gauge",
          radius: "67%",
          startAngle: 225, //刻度起始
          endAngle: -134.8, //刻度结束
          z: 4,
          axisTick: {
            show: true,
            lineStyle: {
              width: 2,
              color: 'rgba(1,244,255, 0.9)'
            }
          },
          splitLine: {
            length: 16, //刻度节点线长度
            lineStyle: {
              width: 2,
              color: 'rgba(1,244,255, 0.9)'
            } //刻度节点线
          },
          axisLabel: {
            color: 'rgba(255,255,255,0)',
            fontSize: 12,
          }, //刻度节点文字颜色
          pointer: {
            show: false
          },
          axisLine: {
            lineStyle: {
              opacity: 0
            }
          },
          detail: {
            show: false
          },
          data: [{
            value: 0,
            name: ""
          }]
        },
        // 刻度圈
        {
          "type": "pie",
          "radius": ["0%", "73%"],
          "center": ["50%", "50%"],
          "avoidLabelOverlap": false,
          "label": {
            "normal": {
              "show": false,
              "position": "center"
            },
            "emphasis": {
              "show": false,
              "textStyle": {
                "fontWeight": "bold"
              }
            }
          },
          "itemStyle": {
            "normal": {
              "color": {
                "type": "linear",
                "x": 0,
                "y": 0,
                "x2": 0,
                "y2": 1,
                "colorStops": [{
                  "offset": 0.05,
                  "color": "rgba(32,36,107, 0.2)"
                }, {
                  "offset": 0.5,
                  "color": "rgba(32,36,107,0.3)"
                }, {
                  "offset": 0.95,
                  "color": "rgba(32,36,107, 0.2)"
                }]
              }
            }
          },
          "labelLine": {
            "normal": {
              "show": false
            }
          },
          "data": [{
            "value": 3235
          }]
        },
  
      ]
    };
    state.main.charts.data1.setOption(option);
    state.main.charts.myCharts.push(state.main.charts.data1);
  }
  const initChart2 = () => {
    state.main.charts.data2 = markRaw(echarts.init(chart2Ref.value));
    var value = 280;
    const option = {
      backgroundColor: '000',
      title: {
        text: `${value}人`,
        subtext: '离场人数',
        left: 'center',
        top: 'center', //top待调整
        textStyle: {
          color: '#fff',
          fontSize: 54,
          fontFamily: 'DINAlternate-Bold',
        },
        subtextStyle: {
          color: '#ff',
          fontSize: 30,
          fontFamily: 'PingFangSC-Regular',
          top: 'center'
        },
        itemGap: 2 //主副标题间距
      },
      xAxis: {
        splitLine: {
          show: false
        },
        axisLabel: {
          show: false
        },
        axisLine: {
          show: false
        }
        // data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
      },
      yAxis: {
        splitLine: {
          show: false
        },
        axisLabel: {
          show: false
        },
        axisLine: {
          show: false
        }
      },
      series: [
        // 内圆
        // {
        //   type: 'pie',
        //   radius: ['0', '50%'],
        //   center: ['50%', '50%'],
        //   z: 0,
        //   itemStyle: {
        //     normal: {
        //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        //         offset: 0,
        //         color: '#1147A1'
        //       },
        //       {
        //         offset: 0.5,
        //         color: '#423DB3'
        //       },
        //       {
        //         offset: 1,
        //         color: '#1147A1'
        //       }
        //       ]),
        //       label: {
        //         show: false
        //       },
        //       labelLine: {
        //         show: false
        //       }
        //     },
        //   },
        //   label: {
        //     normal: {
        //       position: "center",
  
        //     }
        //   },
        //   data: [100],
        // },
        // 进度圈
        {
          type: 'pie',
          radius: ["50%", "52%"],
          data: [{
            value: value,
            itemStyle: {
              normal: {
                borderWidth: 26,
                borderColor: {
                  colorStops: [{
                    offset: 0,
                    color: '#376CCB' || '#00cefc' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#27DEF7' || '#367bec' // 100% 处的颜色
                  }]
                },
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
              },
            },
            label: {
              normal: {
                show: false
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
          },
          {
            name: 'gap',
            value: 288 - value,
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0,
              }
            },
          }
          ]
        },
        //刻度尺
        {
          // name: "白色圈刻度",
          type: "gauge",
          radius: "67%",
          startAngle: 225, //刻度起始
          endAngle: -134.8, //刻度结束
          z: 4,
          axisTick: {
            show: true,
            lineStyle: {
              width: 2,
              color: 'rgba(1,244,255, 0.9)'
            }
          },
          splitLine: {
            length: 16, //刻度节点线长度
            lineStyle: {
              width: 2,
              color: 'rgba(1,244,255, 0.9)'
            } //刻度节点线
          },
          axisLabel: {
            color: 'rgba(255,255,255,0)',
            fontSize: 12,
          }, //刻度节点文字颜色
          pointer: {
            show: false
          },
          axisLine: {
            lineStyle: {
              opacity: 0
            }
          },
          detail: {
            show: false
          },
          data: [{
            value: 0,
            name: ""
          }]
        },
        // 刻度圈
        {
          "type": "pie",
          "radius": ["0%", "73%"],
          "center": ["50%", "50%"],
          "avoidLabelOverlap": false,
          "label": {
            "normal": {
              "show": false,
              "position": "center"
            },
            "emphasis": {
              "show": false,
              "textStyle": {
                "fontWeight": "bold"
              }
            }
          },
          "itemStyle": {
            "normal": {
              "color": {
                "type": "linear",
                "x": 0,
                "y": 0,
                "x2": 0,
                "y2": 1,
                "colorStops": [{
                  "offset": 0.05,
                  "color": "rgba(32,36,107, 0.2)"
                }, {
                  "offset": 0.5,
                  "color": "rgba(32,36,107,0.3)"
                }, {
                  "offset": 0.95,
                  "color": "rgba(32,36,107, 0.2)"
                }]
              }
            }
          },
          "labelLine": {
            "normal": {
              "show": false
            }
          },
          "data": [{
            "value": 3235
          }]
        },
  
      ]
    };
    state.main.charts.data2.setOption(option);
    state.main.charts.myCharts.push(state.main.charts.data2);
  }
  // 批量设置 echarts resize
  const initEchartsResizeFun = () => {
    nextTick(() => {
      for (let i = 0; i < state.main.charts.myCharts.length; i++) {
        setTimeout(() => {
          state.main.charts.myCharts[i].resize();
        }, i * 1000);
      }
    });
  };
  // 批量设置 echarts resize
  const initEchartsResize = () => {
    window.addEventListener('resize', initEchartsResizeFun);
  };
  
  let timer = null;
  let myTable = ref(null);
  
  const clearScroll = () => {
    clearInterval(timer);
    timer = null;
  };
  
  const createScroll = () => {
    clearScroll();
    const table = myTable.value;
  
  
    timer = setInterval(() => {
      table.scrollTop += 1;//滚动高度+1
      console.log(table.clientHeight, table.scrollTop, table.scrollHeight);
      if (table.clientHeight + table.scrollTop == table.scrollHeight) {
        table.scrollTop = 0;
      }
    }, 100);
  };
  
  onMounted(() => {
    createScroll()
    initEchartsResize()
    initChart1()
    initChart2()
  })
  </script>
  
  <style scoped lang="scss">
  .container {
    width: 3000px;
    height: 2000px;
    background-image: url('@/assets/warp.png');
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
  
    .header {
      height: 220px;
      width: 100%;
      box-sizing: border-box;
      background-image: url('@/assets/header/header-warp.png');
      background-size: 100% 100%;
      display: flex;
      position: relative;
  
      .header-info {
        display: flex;
        align-items: center;
        margin-left: 200px;
  
        .info-item {
          display: flex;
  
          .left {
            display: flex;
            flex-direction: column;
            color: #fff;
            align-items: center;
  
            .left-title {
              font-size: 28px;
            }
  
            .left-number {
              font-size: 32px;
            }
          }
  
          .right {
            .right-picwarp {
              position: relative;
  
              .right-pic {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
            }
          }
        }
      }
  
      .header-title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        font-size: 64px;
      }
    }
  
    .main {
      display: flex;
      padding-top: 10px;
      padding-left: 100px;
      padding-bottom: 10px;
      box-sizing: border-box;
      flex: 1;
  
      .left {
        flex: 5;
        display: flex;
        flex-direction: column;
  
        .warp {
          flex: 3;
          // background-image: linear-gradient(to bottom, red, blue);
          background-color: rgba(19, 12, 33, 0.98);
          border-radius: 16px;
          display: flex;
          flex-direction: column;
  
          .head {
            display: flex;
            color: #fff;
            font-size: 38px;
            justify-content: center;
            padding-bottom: 20px;
            position: relative;
  
            .left-time {
              position: absolute;
              right: 40px;
              top: 50%;
              transform: translate(0%, -50%);
            }
          }
  
          .left-content {
            flex: 1;
            display: flex;
            justify-content: space-between;
            padding: 10px 40px 20px 20px;
  
            .seat {
              width: calc(100% / 12.5);
              height: calc(100% / 12.5);
              margin-bottom: 5px;
              background-color: #2ACCF0;
              border-radius: 4px;
              padding: 5px;
              box-sizing: border-box;
  
            }
  
            .seat-left {
              width: 49%;
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              align-content: start;
              background-color: #52f02a;
              border-radius: 4px;
            }
  
            .seat-right {
              width: 49%;
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              align-content: start;
              background-color: #a4f02a;
              border-radius: 4px;
            }
          }
        }
  
        .left-charts {
          flex: 1;
          display: flex;
          padding: 0 40px 0 20px;
  
          .chart1 {
            flex: 2;
          }
  
          .chart2 {
            flex: 2;
          }
  
          .icon {
            flex: 3;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: rgba(13, 13, 49, 1);
            color: #fff;
            font-size: 36px;
  
            img {
              width: 140px;
              height: auto;
            }
  
            .icon-warp {
              display: flex;
              flex-direction: column;
              align-items: center;
            }
          }
        }
      }
  
      .main-right {
        flex: 1;
        color: #fff;
        background-color: rgba(13, 13, 49, 1);
        border-radius: 16px;
        padding-top: 40px;
        display: flex;
        flex-direction: column;
  
        .right-title {
          font-size: 36px;
        }
  
        .right-content {
          padding: 10px;
          flex: 1;
          overflow-y: scroll;
  
          .people {
            display: flex;
            justify-content: space-between;
            font-size: 24px;
            margin-bottom: 8px;
  
            .info {
              flex: 1;
              display: flex;
              padding: 0 20px;
              justify-content: space-between
            }
          }
        }
      }
    }
  }
  </style>